<template>
    <div>
        <div class="title">
            <div class="desc">工作经历</div>
            <div>
                <el-button type="primary" @click="handleAdd" :disabled="flag == 3">经历添加</el-button>
            </div>
        </div>
        <el-table :data="membersList" class="table">
            <el-table-column label="开始时间" width="150">
                <template #default="scope">
                    <el-date-picker v-if="activeIndex == scope.$index" v-model="scope.row.startTime" type="data" @change="changeStartTime(scope.row.startTime,scope.row.endTime,scope.$index)"
                        value-format="YYYY-MM-DD" placeholder="开始时间" clearable style="width: 100%" />
                    <span v-else>{{ scope.row.startTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="结束时间" width="150">
                <template #default="scope">
                    <el-date-picker v-if="activeIndex == scope.$index" v-model="scope.row.endTime" type="data" @change="changeEndTime(scope.row.startTime,scope.row.endTime,scope.$index)"
                        value-format="YYYY-MM-DD" placeholder="结束时间" clearable style="width: 100%" />
                    <span v-else>{{ scope.row.endTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="所在单位" width="260">
                <template #default="scope"  >
                  <popup-tree-input
                    v-if="activeIndex == scope.$index && expertType== 1"
                    :data="orgAllList"
                    :props="popupTreeProps"
                    :prop="scope.row.workUnitName == null? $t('message.org.top_menu'): scope.row.workUnitName"
                    :current-change-handle="(item) => selectCompany(item, scope.row)" clearable
                    node-key="0"/>
                  <el-input v-if="activeIndex == scope.$index && expertType!= 1" v-model="scope.row.workUnitName"
                      placeholder="请输入所在单位" @change="scope.row.workUnitId = scope.row.workUnitName" style="width: 100%" maxlength="50" show-word-limit ></el-input>
                  <span v-else>{{ scope.row.workUnitName }}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="时长(月)" >
                <template #default="scope">
                    <span >{{ scope.row.duration }}</span>
                </template>
            </el-table-column> -->
            <el-table-column label="岗位名称" width="180">
                <template #default="scope">
                    <el-input v-if="activeIndex == scope.$index" v-model="scope.row.positionName"
                        placeholder="请输入岗位名称" style="width: 100%" maxlength="50" show-word-limit ></el-input>
                    <span v-else>{{ scope.row.positionName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="所在国家" width="300">
                <template #default="scope">

                    <el-select placeholder="所在国家" v-if="activeIndex == scope.$index" v-model="scope.row.countryId"
                        @change="changeCountry($event, activeIndex)" style="width: 240px; margin-right: 15px" clearable>
                        <el-option :label="item.itemText" :value="item.itemValue" :key="item.itemValue"
                            v-for="item in countryList" />
                    </el-select>

                    <span v-else>{{ scope.row.country }}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" width="250">
                <template #header>
                    <span>操作</span>
                </template>
                <template #default="scope">
                    <div v-if="activeIndex == scope.$index">

                        <el-button type="success" @click="handleSave">保存</el-button>
                      <el-popconfirm @confirm="handleDelete(scope.$index)" width="220" confirm-button-text="确定"
                                     cancel-button-text="取消" icon-color="#e6a23c" title="你确定要删除当前行?">
                        <template #reference>
                          <el-button type="danger" :disabled="flag == 3">删除</el-button>
                        </template>
                      </el-popconfirm>
                    </div>
                    <div v-else>
                        <el-button type="primary" @click="handleEdit(scope.$index)" :disabled="flag == 3">编辑</el-button>
                        <el-popconfirm @confirm="handleDelete(scope.$index)" width="220" confirm-button-text="确定"
                            cancel-button-text="取消" icon-color="#e6a23c" title="你确定要删除当前行?">
                            <template #reference>
                                <el-button type="danger" :disabled="flag == 3">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script  lang="ts">
import { ref, watch } from 'vue';
import { Modals, tips } from "@/views/science/components/tips/tips";
import PopupTreeInput from '@/views/science/components/PopupTreeInput/index.vue'

export default {
    components: {
      PopupTreeInput,
    },
    emits: {
        dataChange: null,
        paramsChange: null,
    },
    props: {
      expertType: {
        type: Number,
        default: 1,
      },
      members: {
          type: Array,
          required: true,
      },
      countryList: {
          type: Array,
          required: true,

      },
      // falg  1:新增  2:编辑  3:详情
      flag: {
        type: String,
        default: 1,
      },
      orgAllList: {
        type: Array,
        default: () => []
      }
    },
    setup(props, { emit }) {

        let activeIndex = ref(-1);


        const membersList = ref(props.members) as any

        watch(props, (newValue, oldValue) => {
            membersList.value = newValue.members
        });


        const handleAdd = () => {

            let item = {
                startTime: '',
                endTime: '',
                // workUnitId: '',
                workUnitName: '',
                positionName: '',
                duration: '10',
                // id: '',
                country: '',
                countryId: '',
            };
            let flag = true
            membersList.value.every(item=>{
              console.log(item,'item');
              for(let key in item){
                if(item[key]===''){
                  flag =  false
                  return false
                }
              }
              return true
            })
            if(!flag){
              tips("请填写完整数据", "warning");

              return
            }
            membersList.value.push(item);

            activeIndex.value = membersList.value.length - 1;

        }



        const handleEdit = (index: number) => {

            activeIndex.value = index;
        };

        const handleSave = () => {


          let panduan = 0 ;
          membersList.value.forEach(item => {
            for (let i = 0; i < membersList.value.length; i++) {
              console.log(323232,item)
              if(item.startTime == null || item.startTime == ''){
                panduan = 1;
              }
              if(item.endTime == null || item.endTime == ''){
                panduan = 2;
              }
              if(item.workUnitName == null || item.workUnitName == ''){
                panduan = 3;
              }
              if(item.positionName == null || item.positionName == ''){
                panduan = 4;
              }if(item.countryId == null || item.countryId == ''){
                panduan = 5;
              }

            }
          });
          if(panduan == 1){
            tips("数据中开始时间不能为空", "warning");
            // event.stopPropagation();
            return false;
          }else if(panduan == 2){
            tips("数据中结束时间不能为空", "warning");
            return false;
          }else if(panduan == 3){
            tips("数据中所在单位不能为空", "warning");
            return false;
          }else if(panduan == 4){
            tips("数据中岗位名称不能为空", "warning");
            return false;
          }else if(panduan == 5){
            tips("数据中所在国家不能为空", "warning");
            return false;
          }


          activeIndex.value = -1;

            emit('paramsChange', membersList.value)

        };



        let changeCountry = (id: any, currentRow: any) => {

            let itemText = props.countryList.find((item: any) => item.itemValue == id).itemText;

            membersList.value[currentRow].countryId = id

            membersList.value[currentRow].country = itemText

        }


        const handleDelete = (index: number) => {
            membersList.value.splice(index, 1);

            emit('paramsChange', membersList.value)
        };

        const changeStartTime = (startTime,endTime,index) =>{
            let start = new Date(startTime).getTime()
            let end = new Date(endTime).getTime()
            if(start > end){
              tips("开始时间需要小于结束时间", "warning");
              membersList.value[index].startTime = ''
            }
            let duration = Math.trunc((end - start) / 2592000000)
            membersList.value[index].duration = duration > 0 ? duration : 0
            // console.log('changeStartTime',duration,membersList.value,index,);
        }
        const changeEndTime = (startTime,endTime,index) =>{
            let start = new Date(startTime).getTime()
            let end = new Date(endTime).getTime()
            if(start > end){
                tips("开始时间需要小于结束时间", "warning");
                membersList.value[index].endTime = ''
            }
            let duration = Math.trunc((end - start) / 2592000000)
            membersList.value[index].duration = duration > 0 ? duration : 0
        }
      const popupTreeProps = {
        label: 'name',
        children: 'children',
      }
      const selectCompany = (item, row) => {
        row.workUnitId = item.id;
        row.workUnitName = item.name;
      }
        return {
            membersList,
            activeIndex,
            handleAdd,
            handleEdit,
            handleSave,
            handleDelete,
            changeCountry,
            changeStartTime,
            changeEndTime,
          popupTreeProps,
          selectCompany
        }


    },
}
</script>












<style scoped lang="scss">
.title {
    display: flex;
    justify-content: space-between;

    .desc {
        font-weight: bolder;
    }
}

.table {
    margin: 15px 0;
}
</style>
